<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--引入本地 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>
    <title>营业网点</title>
</head>

<body>
    <div id="app">

        <!-- 表格 -->
        <div class="main">
            <div class="card" v-for="(item,index) in listdata">
                <div class="disflex bottombord el-p-b-10">
                    <div class="map"><i class="ifonts el-icon-location blue"></i></div>
                    <div class="title">
                        {{item.wdmc}}
                    </div>
                </div>
                <div class="contents">
                    <div>网点地点：</div>
                    <div class="station">{{item.wddd}}</div>
                </div>
                <div class="contents">
                    <div>联系电话：</div>
                    <div class="station">{{item.lxdh}}</div>
                </div>
                <div class="contents">
                    <div>营业时间：</div>
                    <div class="station txtwrap">
                        {{item.yysj}}
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            value1: '',
            value2: '',
            listdata:[],
        },
        created() {
            this.loadList();
        },
        methods: {
            async loadList(){
                const res = await listAdmin(getTableId("1916"),"pxh",{});
                this.listdata = res.data;
            },
        },

    })
</script>
<style type="text/css">
    body {
        margin: 0;
    }

    .main {
        /* padding: 10px; */
    }

    .card {
        border: 1px solid #eee;
        /* border-radius: 20px; */
        padding: 10px;
        box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .1);
        margin-bottom: 10px;
    }

    .map {
        width: 60px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
    }

    .blue {
        color: #409eff;
    }

    .title {
        width: 100%;
        font-weight: 700;
        line-height: 30px;
    }

    .contents {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 80px 1fr);
        margin-top: 10px;
    }

    .station {
        color: rgb(151, 151, 151);
    }

    .disflex {
        display: flex;
    }

    .txtwrap {
        word-break: break-word;
    }

    .bottombord {
        border-bottom: 1px solid #eee;
    }

    .el-p-b-10 {
        padding-bottom: 10px;
    }
</style>

</html>